<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select and data</title>
</head>
<body>
    <!-- SVG -->
    <h1>SVG</h1>
    <div class="svgBox">
    </div>
    <script src="../node_modules/d3/dist/d3.js" charset="utf-8"></script>
    <script type="text/javascript">
        // 准备画布
        let boxWidth = 300;     // 画布宽
        let boxHeight = 300;    // 画布高
        let svg = d3.select('.svgBox')    // 选择文档中的div.svgBox元素
            .append('svg')      // 添加一个svg元素
            .attr('width', boxWidth)    // 设置宽度
            .attr('height', boxHeight)     // 设置高度
            .style('background-color', 'red');    // 设置背景颜色

        // 画矩形
        let dataSet = [250 , 210 , 170 , 130 , 90];  //数据（表示矩形的宽度）
        let rectHeight = 25; //每个矩形所占的像素高度(包括空白)
        svg.selectAll('rect')
            .data(dataSet)
            .enter()
            .append('rect')
            .attr('x', 20)
            .attr('y', (d, i) => {
                return i * rectHeight;
            })
            .attr('width', (d) => {
                return d;
            })
            .attr('height', rectHeight -2)
            .attr('fill', 'steelblue');

        /* 这段代码添加了与 dataset 数组的长度相同数量的矩形，所使用的语句是：

        *   svg.selectAll("rect")   //选择svg内所有的矩形
                .data(dataset)  //绑定数组
                .enter()        //指定选择集的enter部分
                .append("rect") //添加足够数量的矩形元素

        *   这段代码以后会常常出现在 D3 的代码中，请务必牢记。
        *
        * 使用情景：
        *   有数据，而没有足够图形元素的时候，使用此方法可以添加足够的元素。
        *
        * */
    </script>
</body>
</html>